import "./index.scss";
import { useSubCategoryFilter } from "@/apis/category";
import { useParams } from "react-router-dom";
import XtxSkeleton from "@/components/library/xtxSkeleton";
import classNames from "classnames";
import { memo, useState } from "react";
const SubFilter = memo(function SubFilter({
  filterChange,
}: {
  filterChange: (playload: any) => void;
}) {
  const { id } = useParams();
  const {
    subListFilter: filterData,
    updateBrand,
    updateSaleProperties,
  }: any = useSubCategoryFilter(id as string);

  const filterDataFn = () => {
    const obj: any = {
      brandId: null,
      attrs: [],
    };
    obj.brandId = filterData?.brands?.selectBrand;
    filterData.saleProperties.forEach((item: any) => {
      if (item.selectedProp) {
        const res = item.properties.find(
          (sub: any) => sub.id === item.selectedProp
        );
        obj.attrs.push({ groupName: item.name, propertyName: res.name });
      }
    });
    return obj;
  };
  const clickFn = (id: number) => {
    updateBrand(id);
    setTimeout(() => {
      filterChange(filterDataFn()); // 等状态更新后再调用 filterChange
    }, 0);
  };

  const saleFn = (id: number, index: number) => {
    updateSaleProperties(id, index);
    setTimeout(() => {
      filterChange(filterDataFn()); // 等状态更新后再调用 filterChange
    }, 0);
  };

  return (
    <>
      {filterData?.brands ? (
        <div className="sub-filter">
          <div className="item">
            <div className="head">品牌：</div>
            <div className={classNames("body")}>
              {filterData?.brands?.map((sub: any) => (
                <a
                  onClick={() => clickFn(sub.id)}
                  className={classNames({
                    active: sub.id === filterData?.brands.selectBrand,
                  })}
                  href="javascript:;"
                  key={sub.id}
                >
                  {sub.name}
                </a>
              ))}
            </div>
          </div>
          {filterData?.saleProperties?.map((item: any, index: number) => (
            <>
              <div className="item">
                <div className="head">{item.name}</div>
                <div className="body">
                  {item.properties.map((sub: any) => (
                    <a
                      onClick={() => saleFn(sub.id, index)}
                      className={classNames({
                        active: sub.id === item.selectedProp,
                      })}
                      href="javascript:;"
                      key={sub.id}
                    >
                      {sub.name}
                    </a>
                  ))}
                </div>
              </div>
            </>
          ))}
        </div>
      ) : (
        <div className="sub-filter">
          <XtxSkeleton
            className="item"
            width="800px"
            height="40px"
            animated={true}
          />
          <XtxSkeleton
            className="item"
            width="800px"
            height="40px"
            animated={true}
          />
          <XtxSkeleton
            className="item"
            width="600px"
            height="40px"
            animated={true}
          />
          <XtxSkeleton
            className="item"
            width="600px"
            height="40px"
            animated={true}
          />
          <XtxSkeleton
            className="item"
            width="600px"
            height="40px"
            animated={true}
          />
        </div>
      )}
    </>
  );
});

export default SubFilter;
